<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>可编辑表格</title>
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <style>
        .button-group {
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
        }
    </style>
</head>

<body>
    <main id="app">
        <nav class="navigate">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }"> 权限管理模块</el-breadcrumb-item>
                <el-breadcrumb-item>用户信息管理页面</el-breadcrumb-item>
            </el-breadcrumb>
        </nav>
        <article class="user-table" style="margin-top:10px;">
            <header class="user-table__search">
                <el-input type="search" id="keyword" name="keyword" style="width:300px;">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </header>
            <section class="user-table__main" style="margin-top:10px;">
                <el-table ref="multipleTable" :data="pageInfo.tableData" stripe tooltip-effect="dark"
                    style="width: 100%" highlight-current-row v-loading.fullscreen.lock="loading"
                    element-loading-text="拼命加载中">
                    <el-table-column type="index"></el-table-column>
                    <el-table-column prop="userName" label="用户名">
                    </el-table-column>
                    <el-table-column prop="nickName" label="昵称">
                    </el-table-column>
                    <el-table-column prop="password" label="密码">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别" :formatter="sexFormatter">
                    </el-table-column>
                    <el-table-column prop="phone" label="移动电话">
                    </el-table-column>
                    <el-table-column prop="email" label="电子邮箱" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="birthday" label="生日">
                    </el-table-column>
                    <el-table-column prop="npName" label="行政区划" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="hobbyName" label="爱好" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button-group>
                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">
                                </el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
                                    icon="el-icon-delete">
                                </el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </section>
            <footer class="button-group">
                <!--<el-button type="primary" icon="el-icon-document-add" @click="dialogFormVisible = true"></el-button>-->
                <el-pagination background layout="prev, pager, next" :page-sizes="[5]" :page-size="5"
                    :current-page.sync="pageInfo.currentPage" :total="pageInfo.totalRow"
                    v-on:current-change="handleCurrentChange">
                </el-pagination>
            </footer>
        </article>
        <el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible">
            <el-form :model="formUser">
                <el-form-item label="用户名：">
                    <el-input v-model="formUser.userName" placeholder=""></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" v-on:click="updateUser">提交</el-button>
            </div>
        </el-dialog>
    </main>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/element-ui/lib/index.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../js/conf.js" type="module"></script>
<script type="module">
    import conf from '../js/conf.js';
    const options = {
        xhrFields: {
            withCredentials: true
        },
        method: 'POST',
        headers: {
            'content-type': 'application/x-www-form-urlencoded'
        },
        data: {},
        url: conf.BASE_URL + 'api/user',
    };
    axios.interceptors.response.use(
        response => {
            return response;
        },
        error => {
            if (error.message.includes('timeout')) {   // 判断请求异常信息中是否含有超时timeout字符串
                console.log("错误回调", error);
                alert("网络超时");
                return Promise.reject(error);          // reject这个错误信息
            }
            return Promise.reject(error);
        });
    new Vue({
        el: '#app',
        created() {
            this.initUseData();
        },
        data() {
            return {
                pageInfo: {
                    tableData: [],
                    totalRow: 0,
                    totalPage: 0,
                    currentPage: 1,
                },
                dialogFormVisible: false,
                formUser: {},
                loading: false,
            }
        },
        methods: {
            async updateUser() {
                this.dialogFormVisible = false;
                options.data = { param: 'doUpdate', user: this.formUser };
                console.log(options.data);
                const response = await axios(options);
                console.log(response.data);
            },
            handleEdit(index, row) {
                //console.log(index, row);
                this.formUser = row;
                this.dialogFormVisible = true;
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.$confirm('删除该用户信息将会使与该用户相关的所关联信息一并删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    options.data = { param: 'delete', id: row.id };
                    axios(options).then(response => {
                        if (response.data.result == 'error') {
                            this.$message({
                                type: 'error',
                                message: 'response.data.message'
                            });
                        } else {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    }).catch(error => console.log(errro));
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            async initUseData() {
                this.loading = true;
                options.data = { param: 'init', currentPage: this.pageInfo.currentPage, keyword: '' };
                let response = await axios(options);
                console.log(response.data.page);
                setTimeout(() => {
                    this.pageInfo.tableData = response.data.page.list;
                    [
                        this.pageInfo.totalRow,
                        this.pageInfo.currentPage,
                        this.pageInfo.totalPage
                    ]
                        =
                        [
                            response.data.page.totalRowNumber,
                            response.data.page.currentPage,
                            response.data.page.totalPageNumber
                        ];
                    this.loading = false;
                }, 1000);

            },
            handleCurrentChange() {
                this.initUseData();
            },
            sexFormatter(row, column) {
                return row.sex == '1' ? '男' : '女';
            }
        }
    });
</script>

</html>